<template>
    <div class="classic-demo">
        <div class="author-demo">
            <div>作者：陈炼</div>
            <div>日期：2017/11/02</div>
        </div>
        <div class="zlst-classic-base-info">
            <div class="base-info clearfix">
                <i class="iconfont icon-renwu"></i>
                <!--<span class="state-icon lock-icon"></span>
                <span class="state-icon forbidden-icon"></span>-->
                <div class="info-text">
                    <span>用户名</span>
                    <em>账号</em>
                </div>
            </div>
            <p><i class="iconfont icon-tips"></i>提示：最后登录时间07-25 09:12，登陆地 长沙</p>
        </div>
        <pre style="background-color: #ececec;">
            <code class="html" v-text="htmlCode">
            </code>
        </pre>
        <p style="color:#f00">高度未做限制，只有头像和两行描述的模块，删除p标签即可</p>
    </div>
</template>
<script>
    import hljs from 'highlight.js'
    export default {
        data () {
            return {
                htmlCode: '<div class="zlst-classic-base-info">\n' +
                '            <div class="base-info clearfix">\n' +
                '                <i class="iconfont icon-renwu"></i>\n' +
                '                <div class="info-text">\n' +
                '                    <span>用户名</span>\n' +
                '                    <em>账号</em>\n' +
                '                </div>\n' +
                '            </div>\n' +
                '            <p><i class="iconfont icon-tips"></i>提示：最后登录时间07-25 09:12，登陆地 长沙</p>\n' +
                '        </div>',
            }
        },
        // 组件被挂载的时候执行的方法
        mounted: function () {
            window.setTimeout(function () {
                $('.classic-demo pre code').each(function(i, block) {
                    hljs.highlightBlock(block);
                });
            }, 0);
        }
    }
</script>

